<template>
  <div>
    <div :style="mapstyle" id="main" style="margin-top: -10px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
var mapSize = 0;
export default {
  props: {
    params: {
      default: function () {
        return [];
      },
    },
    infoCategoryId: {},
    center: {
      type: Object,
    },
    proportion: {},
    parameter: {},
  },
  data() {
    return {
      option: [],
      isDownLoad: 0,
      echartsList: [],
      myChart: {},
      xlist: [],
      convertData: [],
      ylist: [],
      total: 0,
      start: 0,
      lableName: "",
      mapstyle: "",
      remarksTop: 0,
      remarksLast: 0,
      remarks: 0,
      mapSize: 0,
    };
  },
  mounted() {
    this.worldMapContainer = document.getElementById("main");
    this.isDownLoad = this.$route.query.download;
    this.resizeWorldMapContainer();
    this.remarks = localStorage.getItem("remarks");
    this.mapSize = this.parameter;
    console.log("this.mapSize", this.mapSize);
    console.log("this.remarks", this.remarks);
    if (this.remarks == 3) {
      this.remarksTop = 5;
    } else if (this.remarks == 5) {
      this.remarksTop = 3;
      this.remarksLast = 3;
      // this.convertData.length - this.remarksLast;
    } else if (this.remarks == 2) {
      this.remarksTop = "all";
    }
  },
  methods: {
    async getEcharts() {
      this.$nextTick(() => {
        this.getEcgarts();
      });
    },

    downloadFile(url, fileName) {
      var link = document.createElement("a");
      //设置下载的文件名
      document.body.appendChild(link);
      link.style.display = "none";
      link.href = url;
      link.download = fileName;
      link.click();
      document.body.removeChild(link);
      // window.URL.revokeObjectURL();
    },
    //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    resizeWorldMapContainer() {
      let height = window.innerHeight - 0 + "px";
      this.worldMapContainer.style.height = window.innerHeight - 0 + "px";
      this.mapstyle = `height: ${height}`;
      if (this.isDownLoad == 1) {
        // this.mapstyle = "height: '2160px', width: '4096px'";
        this.worldMapContainer.style.width = "4096px";
        this.mapstyle = `height: "2160px"`;
        this.worldMapContainer.style.height = "2160px";
      }
    },

    getData(echarts) {
      this.echarts = [];
      if (echarts) {
        this.echarts = echarts[0].dataList;
        if (this.echarts[0].color) {
          this.legendShow = true;
        } else {
          this.legendShow = false;
        }
      }
      if (this.echarts && this.echarts.length > 0) {
        this.echarts.forEach((e) => {
          if (e.lng != undefined && e.lat != undefined && !e.color) {
            this.convertData.push({
              name: e.area,
              value: [e.lng, e.lat, e.the_data],
            });
          }
        });
        this.total = this.convertData.length;
        this.start = this.total - this.remarksLast;
        mapSize = Number(this.mapSize);
        console.log("this.mapSize111", this.mapSize);
        console.log("this.remarksLast", this.remarksLast);
        console.log("this.start", this.start);
        console.log("this.total", this.total);
      }
      this.getEcharts();
    },

    getEcgarts() {
      var myChart = echarts.init(document.getElementById("main"));
      this.myChart = myChart;
      var mapStyle = {
        features: ["road", "building", "water", "land"], //隐藏地图上的"poi",
        style: "normal",
      };
      var style_map = [
        "normal",
        "light",
        "dark",
        "redalert",
        "googlelite",
        "grassgreen",
        "midnight",
        "pink",
        "darkgreen",
        "bluish",
        "grayscale",
        "hardedge",
      ];
      this.option = {
        title: {
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        toolbox: {
          show: true,
          left: "left",
          bottom: "48px",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        //是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
        visualMap: [
          {
            dimension: 0, //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
            seriesIndex: 0, //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
            inRange: {
              color: ["#b34038"], //颜色
            },
            textStyle: {
              color: "#fff",
            },
            show: false,
          },
          {
            dimension: 1, //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
            seriesIndex: 1, //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
            inRange: {
              color: ["#de3333"], //颜色
            },
            textStyle: {
              color: "#fff",
            },
            show: false,
          },
          {
            dimension: 2, //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
            seriesIndex: 2, //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
            inRange: {
              color: ["#0596e9"], //颜色
            },
            textStyle: {
              color: "#fff",
            },
            show: false,
          },
        ],

        geo: {
          map: "china",
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#323c48",
              borderColor: "#111",
            },
            emphasis: {
              areaColor: "#2a333d",
            },
          },
        },

        bmap: {
          center: this.center
            ? [this.center.lng, this.center.lat]
            : ["108.934953", "34.54534"],
          zoom: this.proportion || 5,
          roam: true,
          mapStyle: mapStyle,
        },
        series: [
          {
            name: "人口",
            type: "scatter",
            coordinateSystem: "bmap",
            data: this.convertData,
            symbolSize: function (val) {
              return Math.sqrt(val[2] / mapSize / 13.1415926);
            },
            encode: {
              value: 2,
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: false,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
          },
          {
            name: `Top${this.remarksTop}`,
            type: "scatter",
            coordinateSystem: "bmap",
            data: this.convertData.slice(
              0,
              this.remarksTop == "all"
                ? this.convertData.length
                : this.remarksTop
            ),
            symbolSize: function (val) {
              return Math.sqrt(val[2] / mapSize / 13.1415926);
            },
            encode: {
              value: 2,
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              formatter: function (params) {
                let str = params.name + "\n" + params.data.value[2];
                return str;
              },
              position: "right",
              show: true,
              fontSize: 12,
              textBorderColor: "#fff",
              textBorderWidth: 1,
            },
            itemStyle: {
              shadowBlur: 10,
              // shadowColor: "#de3333",
            },
            emphasis: {
              scale: true,
            },
            zlevel: 1,
          },
          {
            name: `Last${this.remarksLast}`,
            type: "scatter",
            coordinateSystem: "bmap",
            data: this.convertData.slice(this.start, this.total),
            symbolSize: function (val) {
              return Math.sqrt(val[2] / mapSize / 13.1415926);
            },
            encode: {
              value: 2,
            },
            showEffectOn: "render",
            label: {
              formatter: function (params) {
                console.log("params", params);
                let str = params.name + "\n" + params.data.value[2];
                return str;
              },
              fontSize: 12,
              textBorderColor: "#fff",
              textBorderWidth: 1,
              position: "right",
              show: true,
            },
            itemStyle: {
              shadowBlur: 0,
              shadowColor: "#0596e9",
            },
            emphasis: {},
            zlevel: 1,
          },
        ],
      };

      myChart.setOption(this.option);
      if (this.isDownLoad == 1) {
        const chartImgUrl = myChart.getDataURL({
          pixelRatio: 1,
          backgroundColor: "",
          type: "png",
        });
        setTimeout(() => {
          this.downloadFile(chartImgUrl, this.$route.query.kindName);
        }, 2000);
      }
    },
  },
};
</script>

<style lang="scss">
.button {
  z-index: 9999999999;
  position: absolute;
  bottom: 20px;
  left: 80px;
  height: 30px;
  width: 80px;
}
.a {
  color: #b34038;
  color: #8400ff;
  color: #00a1ff;
}
</style>
